<template>
  <div class="grid grid--layout grid-2 grid-lap-1">
    <div class="element--height-regular">
      <div class="card__text gutter--large spacing--large remove-empty-space">
        <span class="text-size--small">Whole grain</span>
        <h3 class="h3">
          <a href="javascript:;">
            <span class="text-animation--underline underline-mobile">Bakery</span>
          </a></h3>
        <span class="text-size--regular">Limited Availability</span>
      </div>
      <q-img src="@/assets/images/category-poster-1.webp" fit="fill">
      </q-img>
    </div>

    <div class="element--height-regular">
      <div class="card__text gutter--large spacing--large remove-empty-space">
        <span class="text-size--small">Hand-picked</span>
        <h3 class="h3">
          <a href="ollections/bakery">
            <span class="text-animation--underline underline-mobile">Fruits & Vegetables</span>
          </a></h3>
        <span class="text-size--regular">Limited Availability</span>
      </div>
      <q-img src="@/assets/images/category-poster-2.webp" fit="fill">
      </q-img>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose} from 'vue'

defineProps({})

const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>
.grid--layout {
  grid-template-columns: repeat(var(--visible-cols), var(--col-size));
}
.grid-2 {
  --visible-cols: 2;
}
.grid {
  --col-gap: 26px;
  --col-size: calc((100% - var(--col-gap)*(var(--visible-cols) - 1)) / var(--visible-cols));
  display: grid;
  grid-gap: var(--col-gap);
}
.element--height-regular {
  position: relative;
}
.card__text{
  width: 250px;
  position: absolute;
  z-index: 1;
  left: 55px;
  bottom: 50px;
  h3{
    font-size: 40px;
    font-weight: 800;
    margin: 20px 0 20px 0;
  }
}
.q-img{
  border-radius: 10px;
}
</style>